export const imgConfig = [
  {
    img: require('./images/one.jpg').default,
  },
  {
    img: require('./images/two.jpg').default,
  },
  {
    img: require('./images/three.jpg').default,
  },
  {
    img: require('./images/four.jpg').default,
  },
  {
    img: require('./images/five.jpg').default,
  },
  {
    img: require('./images/six.jpg').default,
  },
]

// banner
class Banner {
  constructor(ele, imgArr) {
    this.ele = ele
    this.imgArr = imgArr

    // 定义index,存储执行li的索引下标
    this.index = 1
    this.time = null
    // 定义bool,存储原始值,控制轮播图,防止点击过快
    this.bool = true
  }
  init() {
    this.setHTML()
    this.autoLoop()
    this.mouseInOut()
    this.hid()
  }
  setHTML() {
    let eleHTML = ''
    this.imgArr.forEach((item, key) => {
      eleHTML += `<li class="swiper-li"><img src=${item.img}/></li>`
    })

    this.ele.innerHTML = eleHTML
    const cloneFirst = this.ele.querySelectorAll('li')[0].cloneNode(true)
    const cloneLast = this.ele.querySelectorAll('li')[
      // eslint-disable-next-line no-unexpected-multiline
      this.imgArr.length - 1
    ].cloneNode(true)
    // **将最前面的图和最后面的图放在该元素的第一张和最后一张,是为了在轮播图片的时候更加的生动,流畅
    this.ele.appendChild(cloneFirst)
    // 克隆的最后一个,写入到ul的起始
    this.ele.insertBefore(cloneLast, this.ele.querySelectorAll('li')[0])
    this.liWidth = cloneFirst.offsetWidth
    this.ele.style.width = this.liWidth * (this.imgArr.length + 2) + 'px'
    this.ele.style.left = -this.index * this.liWidth + 'px'
  }
  // 运动函数
  move(ele, typeObj, fun) {
    const obj = {}
    for (let type in typeObj) {
      obj[type] = setInterval(() => {
        // 获取该元素的某一个属性的初始值
        // eslint-disable-next-line radix
        let start = parseInt(window.getComputedStyle(ele)[type])
        // 获取该元素的某一个属性的结束位置
        // eslint-disable-next-line radix
        let end = parseInt(typeObj[type])
        // 设置每一层及的步长
        let speed = (end - start) / 5
        // 3, 对步长取整,大于0,向上取整,小于0,向下取整
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
        // 将每一次的步长与初始值加起来,然后给该元素设置回去
        start += speed
        ele.style[type] = start + 'px'
        // 如果该元素的某一个属性从初始值运动到了结束的位置,那么清楚定时器
        if (start === end) {
          clearInterval(obj[type])
          delete obj[type]
          const arr = Object.keys(obj)
          if (arr.length === 0) {
            fun && typeof fun === 'function' && fun()
          }
        }
      }, 30)
    }
  }

  // 自动轮播
  autoLoop() {
    this.time = setInterval(() => {
      this.index++

      this.move(
        this.ele,
        { left: -this.index * this.liWidth },
        this.loopEnd.bind(this)
      )
    }, 3000)
  }
  // 轮播终止函数
  loopEnd() {
    if (this.index === this.imgArr.length + 1) {
      this.index = 1
    } else if (this.index === 0) {
      this.index = this.imgArr.length
    }

    this.ele.style.left = `-${this.index * this.liWidth}px`
  }
  // 鼠标移入移除
  mouseInOut() {
    // 移入,清除定时器
    this.ele.addEventListener('mouseenter', () => {
      clearInterval(this.time)
    })
    // 移出,再次启动,自动轮播函数
    this.ele.addEventListener('mouseleave', () => {
      this.autoLoop()
    })
  }
  //  浏览器隐藏
  hid() {
    // 给整个文档添加浏览器显示状态改变,监听事件
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') {
        // 浏览器隐藏,清除定时器
        clearInterval(this.time)
      } else if (document.visibilityState === 'visible') {
        // 再次调用自动轮播函数
        this.autoLoop()
      }
    })
  }
}

export default Banner
